<template>
  <view>
    <!-- 话题详情组件 -->
    <topic-detail :topicInfo="topicInfo"></topic-detail>

    <!-- 分割线 -->
    <view style="height: 15rpx; background-color: #f0ecec"></view>
    <!-- 帖子 -->
    <view class="flex align-center p-2 border-bottom" v-for="(item, index) in popular" :key="index">
      <text class="iconfont icon-xihuan text-main mr-2" style="color: red"></text>
      <text class="text-ellipsis">{{ item.title }}</text>
    </view>
    <!-- 分割线 -->
    <view style="height: 15rpx; background-color: #f0ecec"></view>
    <!-- tab -->
    <view class="flex py-2 align-center">
      <view
        class="flex justify-center align-center"
        style="width: 50%"
        v-for="(item, index) in tabNameList"
        :key="index"
        :class="tabIndex === index ? 'text-main font-lg font-weight-bold text-danger' : 'font-md'"
        @click="changeTab(index)"
      >{{ item.name }}</view>
    </view>
    <!-- 列表组件 -->
    <template v-if="listData.length > 0">
      <block v-for="(item, index) in listData" :key="index">
        <common-list
          :item="item"
          :index="index"
          @follow="follow"
          @doSupport="doSupport"
          :isdetail="false"
          :isgeren="true"
        ></common-list>
        <!-- 分割线 -->
        <view style="height: 15rpx; background-color: #f0ecec"></view>
      </block>
    </template>
    <template v-else>
      <!-- 空白页组件 -->
      <noThing></noThing>
    </template>

    <!-- 上拉加载更多组件 -->
    <template v-if="listData.length > 0">
      <loadmore :loadmore="loadtext"></loadmore>
    </template>
  </view>
</template>

<script lang="ts" setup>
import commonList from '@/components/common-list/index'
import loadmore from '@/components/common/loadmore.vue'
import noThing from '@/components/common/noThing.vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import topicDetail from '@/components/topic-detail/index.vue'
import { getTopicDetailAPI } from '@/services/shouye'
import { ref } from 'vue'
import { myStore, liaotStore } from '@/stores'
const user = myStore()
const topicInfo = ref({})
//    帖子
const popular = ref([
  {
    title: '新人必读】好好学习天天向上，好好学习天天向上，好好学习天天向上',
  },
  {
    title: '新人必读】好好学习天天向上，好好学习天天向上，好好学习天天向上',
  },
])
onLoad(async (e: any) => {
  console.log(e, 'wwww')

  if (e.detail) {
    let res = JSON.parse(e.detail)
    console.log(res, '话题')
    topicInfo.value = res
  }
  let res = await getTopicDetailAPI({ id: JSON.parse(e.id), user: user.userinfo })
  console.log('话题数据', res)
  listData.value = res.data
})
// tab
const tabIndex = ref(0)
const tabNameList = ref([{ name: '默认' }])
// 列表
const listData = ref([
  {
    title: '标题',
    content: '内容',
    time: '2021-01-01',
    img: '../../static//images/loading 加载中_爱给网_aigei_com.gif',
    isfollow: false,
    name: '名称',
    support: {
      type: '',
      support_count: 1,
      unsupport_count: 2,
    },
    comment_count: 2,
    share_num: 2,
  },
])

//  点击切换选项卡
const changeTab = (index) => {
  tabIndex.value = index
  // 获取数据
  // if (!this['firstLoad' + (index + 1)]) {
  //   this.getDate()
  // }
}
//对按钮顶的判断
// follow
const follow = (index: number, index1: number, item) => {
  console.log(listData.value[index].isfollow, '21312312312321')
  listData.value.map((obj: any) => {
    if (obj.toname === item.toname) {
      obj.isfollow = obj.isfollow === 'true' ? 'false' : 'true'
    }
  })
}

// 判断点赞等
//doSupport
const doSupport = (e) => {
  //
  let msg = e.type === 'support' ? '支持' : '不支持'
  // 如果用户已经支持了，就不能再点击   这里list报红是没有错误
  if (listData.value[e.index].support.type === e.type) return
  // 如果之前已经支持了，按了不支持，就是支持减1，不支持加一
  if (listData.value[e.index].support.type === 'support' && e.type === 'unsupport') {
    listData.value[e.index].support.support_count--
    listData.value[e.index].support.unsupport_count++
  } else if (listData.value[e.index].support.type === 'unsupport' && e.type === 'support') {
    listData.value[e.index].support.support_count++
    listData.value[e.index].support.unsupport_count--
  } else {
    listData.value[e.index].support[e.type + '_count']++
  }
  listData.value[e.index].support.type = e.type
  // 点赞
  uni.showToast({
    title: msg + '成功',

    duration: 1000,
  })
  // list.value[e.index].support.type = e.type
  // list.value[e.index].support[e.type + '_count']++
}
// 监听上拉加载的页面生命周期不是scroll-view
const loadtext = ref('上拉加载更多')
onReachBottom(async () => {
  // 获取数据
  // if (!this['firstLoad' + (index + 1)]) {
  //   this.getDate()
  // }
  console.log('上拉加载更多111111111')
  loadmore1()
})
// 上拉加载事件函数
const loadmore1 = () => {
  // 判断是否处于可加载状态
  if (loadtext.value !== '上拉加载更多') return
  // 加载数据
  loadtext.value = '加载中...'


  return uni.showToast({
    title: '没有数据了',
    icon: 'error',
    duration: 1000,
  })
}
</script>

<style>
@import url('../../static//assets/wxss/iconfont.css');
.indistinct {
  /* 模糊效果 */
  filter: blur(10px);
}
</style>
